import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import 'reset-css'
import './index.css'
import './assets/style/global.scss'
import { BrowserRouter } from 'react-router-dom'
import { start, registerMicroApps, initGlobalState } from 'qiankun'
ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

// 1. 要加载的子应用列表
const apps = [
  {
    name: "sub-react", // 子应用的名称
    entry: '//localhost:9001', // 默认会加载这个路径下的html，解析里面的js
    activeRule: "/sub-react", // 匹配的路由
    container: "#sub-app" // 加载的容器
  },
  {
    name: "sub-vue", // 子应用的名称
    entry: '//localhost:9002', // 默认会加载这个路径下的html，解析里面的js
    activeRule: "/sub-vue", // 匹配的路由
    container: "#sub-app" // 加载的容器
  }
]

// 2. 注册子应用
registerMicroApps(apps, {
  beforeLoad: [async app => console.log('before load', app.name)],
  beforeMount: [async app => console.log('before mount', app.name)],
  afterMount: [async app => console.log('after mount', app.name)],
})

const state = { count: 1 }

const actions = initGlobalState(state);
// 主项目项目监听和修改
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);

// 3. 启动微服务
start(
  {
    sandbox: {
      // 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点，从而确保微应用的样式不会对全局造成影响。
      strictStyleIsolation: true,
      // 设置实验性的样式隔离特性，即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围
      experimentalStyleIsolation: true
    },
    prefetch: false // 取消预加载
  }
);